<template>
    <div class="foot-nav-containner">
        <ul class="bottom-nav">
          <router-link tag="li" :to='{name:"index"}' class="bottom-nav__li bottom-nav__li--home">
            <i class="fa fa-home "></i><br/>
            <p class="text">首页</p>
          </router-link>
          <router-link tag="li" :to='{name:"schedule"}' class="bottom-nav__li icon-shoppingcart bottom-nav__li--car">
            <i class="fa fa-calendar-o"></i>
            <p class="text">日程安排</p>
          </router-link>
          <router-link tag="li" :to='{name:"addresslist"}' class="bottom-nav__li bottom-nav__li--search">
            <i class=" fa fa-address-book-o"></i>
            <p class="text">通讯录</p>
          </router-link>
          <router-link tag="li" :to='{name:"mine"}' class="bottom-nav__li bottom-nav__li--vip">
              <i class="fa fa-user-o"></i>
              <p class="text">我的</p>
            </router-link>
        </ul>
     </div>
</template>

<script>
export default {
    name: 'foot-nav',
    data () {
        return {

        }
    },
    computed:{
    }
}
</script>

<style scoped lang="scss">
  @import '../base/css/base.scss';
    .foot-nav-containner{
        position: fixed;
        bottom:0;
        width: 100%;
        z-index: 1001;
        border-top: 0.014rem solid #ddd;
        background: #fff;
        .bottom-nav{
            display: flex;
            .bottom-nav__li{
                flex:1;
                align-items:center;
                justify-content:center;
                text-align: center;
                height:1.111rem;
                @include fz(8px);
                position: relative;
                color: #909399;
                padding: 5px 0 10px;
              .text {
                position: relative;
                @include fz(3px);
                text-align: center;
              }
            }
        }
    }
    .router-link-active{
      color:#4DA9EC!important;
    }






</style>
